<template>
  <div>
    <div>
      <el-form label-width="80px" class="demo-ruleForm" inline>
        <el-form-item label="学生">
          <el-select v-model="domain.StudentId" @change="testSite(domain.StudentId)" placeholder="请选择学生">
                    <el-option
                            v-for="item in studentList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                            :disabled="item.disabled">
                    </el-option>
                </el-select>
        </el-form-item>
        <el-form-item label="课程">
          <el-select v-model="domain.CourseId" @change="testSite(domain.CourseId)" placeholder="请选择课程">
                    <el-option
                            v-for="item in courseList"
                            :key="item.id"
                            :label="item.courseName"
                            :value="item.id"
                            :disabled="item.disabled">
                    </el-option>
                </el-select>
        </el-form-item>
        <el-form-item style="margin-bottom: 5px">
          <el-button type="primary" @click="search">查询</el-button>
          <el-button @click="reSet" style="margin-left: 8px"
            >重置查询</el-button
          >
          <el-button type="primary" @click="onhandAdd" style="margin-left: 8px"
            >录入成绩</el-button
          >
        </el-form-item>
      </el-form>
      <el-table
        border
        style="width: 100%"
        :data="
          ScoreList.slice(
            (currentPage - 1) * pagesize,
            currentPage * pagesize
          )
        "
      >
        <el-table-column fixed key="studentName" prop="studentName" label="学生姓名">
        </el-table-column>
        <el-table-column fixed key="courseName" prop="courseName" label="课程名称">
        </el-table-column>
        <el-table-column fixed key="grade" prop="grade" label="分数">
        </el-table-column>

        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-edit"
              size="small"
              @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button size="mini" type="danger" @click="deleteData(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 20, 40]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="ScoreList.length"
        style="margin-top: 1%;"
      >
      </el-pagination>

      <el-dialog
        :title="addtitle"
        :visible.sync="dialogVisible"
        width="40%"
        :before-close="handleClose"
      >
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="refRuleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="学生姓名" prop="studentName">
            <el-input v-model="ruleForm.studentName"></el-input>
          </el-form-item>
          <el-form-item label="课程名称" prop="courseName">
            <el-input v-model="ruleForm.courseName"></el-input>
          </el-form-item>
          <el-form-item label="分数" prop="grade">
            <el-input v-model="ruleForm.grade"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisibleConfirm"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
    <CreateScore
    :title="addScoreTitle"
    :addScoreVisible="addScoreVisible" @Coursevent="ChangeSelect"
    @cancel="addScoreVisible = false" :FormData="toEditData" :SList="toSList1" :CList="toCList" @tabListevent="tabList($event)" @closeevent="handleClose($event)"
    ></CreateScore>
  </div>
  
</template>

<script>
import ajax from "@/lib/ajax";
import CreateScore from "@/views/setting/score/CreateScore";
import { Component, Vue, Inject, Prop, Watch } from "vue-property-decorator";
export default {
  components: {
    CreateScore,
 },
  data() {
    return {      
      aid: "", //全局id
      dialogVisible: false,
      addtitle: "添加学生",
      toEditData: {
        studentId: '',
        courseId: '',
        Grade: ''
      },
      toSList1: [], ///给modal传的值
      toCList: [], ///给modal传的值
      //默认为false，Dialog不显示
		  addScoreVisible: false,
        //Dialog的标题
         addScoreTitle: "添加成绩",
      domain: {
        ///查询条件
        StudentId: -1,
        CourseId: -1
      },
      studentList: '', ///下拉控件的数据源
      courseList: '', ///下拉控件的数据源
      rules: {
        courseName: [
          { required: true, message: "请输入学生姓名", trigger: "blur" },
          {
            min: 3,
            max: 10,
            message: "长度在 3 到 10 个字符",
            trigger: "blur",
          },
        ],
        studentName: [{ required: true, message: "请输入学号", trigger: "blur" }],
        grade: [{ required: true, message: "请输入分数", trigger: "blur" }],
      },
      ruleForm: {
        studentName:"",
        courseName: "",
        grade: "",
      },
      showModal1: false,
      keyword: "",
      currentPage: 1, //初始页
      pagesize: 5, //    每页的数据
      ScoreList: [],
    };
  },
  methods: {
    //   表格接口列表
    tabList() {      
       var that = this;
        ajax
          .post('/api/services/app/Score/OutPutAllScore', {
            StudentId: -1,
            CourseId: -1,
            keyword: that.keyword,
          })
          .then(function (res) {
            that.ScoreList = res.data.result;
            console.log(res.data.result); 
            //that.$refs.myPage.ParentsToCreated(that.date1)
          })
          .catch((res) => {
                this.$message.error("初始化失败");
        });
    },
    search() {
      this.tabList();
    },
    testSite(id){

    },
    ChangeSelect(data){
      console.log(data)
      this.toCList = data
    },
    reSet() {
      this.keyword = "";
      this.tabList();
    },

    deleteData(index, row) {
      this.ruleForm = row; //row当前行数据，把当前行的数据赋值给 表单
      this.aid = row.id; //把id存全局
      let id = this.aid;
      console.log(this.aid);
      var that = this;
      ajax
        .post('/api/services/app/Score/DelScore', {
          Id: id,
          StudentId: that.domain.StudentId,
          CourseId: that.domain.CourseId,
        })
        .then((res) =>  {
          this.$message.success("删除成功"); //删除成功消息提示
          this.tabList(); //刷新列表
        })

      
    },
    // 新增
    onhandAdd() {
      
      this.addScoreVisible = true;
      
    },
    handleClose(done) {
      this.dialogVisible = false;
      this.addScoreVisible = false;
    },
    // 编辑
    handleEdit(index, row) {
      console.log(index, row.id);
      this.dialogVisible = true; //显示弹框
      this.addtitle ="编辑成绩";
      this.ruleForm = row; //row当前行数据，把当前行的数据赋值给 表单
      this.aid = row.id; //把id存全局
      console.log(this.aid);
      console.log(row);
    },
    // 确定
    dialogVisibleConfirm() {
      var that = this;
      // 新增接口
      if (this.aid == "") {
        console.log(that.ruleForm.courseCode);
        ajax
          .post("/api/services/app/Course/CreateCourse", {
            courseCode: that.ruleForm.courseCode,
            courseName: that.ruleForm.courseName,
          })
          .then((res) => {
            // console.log(res,"新增")
            this.$message.success("添加成功"); //新增成功消息提示             
            this.dialogVisible = false; //关闭弹框
            this.tabList(); //刷新列表
          })
          .catch((res) => {
            console.log(JSON.stringify(res))
            this.$message.error("添加失败");
          });
      } else {
        // 修改接口
        let id = that.aid;
        console.log("---"+id)       
        ajax
          .put("/api/services/app/Score/UpdateScore", {
            Id : id,            
            Grade: that.ruleForm.grade,
            StudentId: that.domain.StudentId,
            CourseId: that.domain.CourseId,
          })
          .then((res) => {
            // console.log(res,"新增")
            console.log(res, "修改");
            this.$message.success("修改成功");
            this.dialogVisible = false;
            this.tabList(); //刷新列表
          })
          .catch((res) => {
            console.log("????")
            this.$message.error("修改失败");
          });

        
      }
    },

    // 初始页currentPage、初始每页数据数pagesize和数据data
    handleSizeChange: function (size) {
      this.pagesize = size;
      console.log(this.pagesize); //每页下拉显示数据
    },
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage;
      console.log(this.currentPage); //点击第几页
    },

  },
  created() {
    var that = this;
    ajax
      .post('/api/services/app/Score/OutPutAllScore', {
        StudentId: -1,
        CourseId: -1,
        keyword: that.keyword,
      })
      .then(function (res) {
        that.ScoreList = res.data.result;
        console.log(res.data.result); 
        //that.$refs.myPage.ParentsToCreated(that.date1)
      })
      .catch((res) => {
            this.$message.error("初始化失败");
       });
    
  },
  beforeMount() {
    this.addScoreVisible = false;
    this.toEditData.studentId=-1;
    this.toEditData.courseId=-1;
    var that = this
    ajax.post('/api/services/app/Student/OutPutAllStudent', {
        keyword: "",
      })
    .then(function (res) {
      that.toSList1 = res.data.result;
      console.log(res.data.result)
      that.studentList = res.data.result;     
      that.studentList.splice(0, 0, { id: -1, name: '所有' })   
      
    })
    .catch(res => {
      console,log(res)
    })

    ajax.post('/api/services/app/Course/OutPutAllCourse', {
        keyword: "",
      })
    .then(function (res) {
      that.courseList = res.data.result;
      that.toCList = res.data.result ;
      that.courseList.splice(0, 0, { id: -1, courseName: '所有' })   
    })
    .catch(res => {
      console,log(res)
    })
  },
  mounted() {
    
  },

  Watch: {},
};
</script>
